6-2 DOM k

除了存取 DOM 物件的性質外，我們也可以執行各個物件所提供的方法。欲執行物件的方法，可直接將輸入引數放在方法之後的括弧內，其格式如下：
objectName.methodName([arguments]);
首先我們看看 window 下的 history 物件極其相關方法，此物件的功能是用來記錄網頁瀏覽的歷史紀錄，請見下列範例：

Example（histGo01.htm）：

上述範例的原始檔如下：

原始檔（histGo01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>"history" 的幾個方法</h2>
<hr>
<a href="http://www.cs.nthu.edu.tw">清華大學資訊系</a><br>
<hr>

History 長度 = <script>document.writeln(history.length)</script>[使用 history.length]<br>
<a href="javascript:history.go(-1)">回前一頁</a> [使用 history.go(-1)]<br>
<a href="javascript:history.go(0)">重新整理</a> [使用 history.go(0)]<br>
<a href="javascript:history.go(+1)">跳下一頁</a> [使用 history.go(+1)]
<hr>

</body>
</html>

在上述範例中，history.length 記錄了以前瀏覽網頁的頁數，我們可以先點選「清華大學資訊系」，再按「上一頁」的瀏覽器按鈕，就可以看到「History 長度」已經變成 2。我們也可以呼叫 history.go(n) 來跳到之前瀏覽過的網頁，當 n=-1 時，代表跳到前一個網頁，當 n=+1 時，代表跳到下一個網頁，而當 n=0，則代表重新整理此網頁。

Hint
你可以直接使用 history 物件，而不必使用全名 window.history。

另一個常用的方法是 window 物件的 open() 方法，可以用來開啟瀏覽器新視窗，並指定視窗的各種屬性 ，此方法的格式如下：

windowId = window.open([url][, winName][, winControlString][, keepHistory]); 說明如下： 此方法的使用可見下列範例：

Example（winOpen01.htm）：

在上述範例中，只要你點選任一個連結，JavaScript 就會使用 window.open() 來開啟一個新視窗來顯示此連結。上述範例的原始檔如下：

原始檔（winOpen01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 window.open() 的範例</h2>
<hr>
<script>
function openWin(url){
	window.open(url,'Detail','status=no,toolbar=no,width=800,height=600');
}
</script>
<a href="#" onClick="openWin('http://www.nthu.edu.tw')">清大首頁</a><br>
<a href="#" onClick="openWin('http://www.nctu.edu.tw')">交大首頁</a><br>
<a href="#" onClick="openWin('http://www.ntu.edu.tw')">台大首頁</a><br>
<hr>

</body>
</html>

在上述範例中，比較需要注意的一列是「href="#"」，這是一個「虛擬」的連結，當使用者點選此連結時，瀏覽器並不會嘗試去載入一個新網頁，而是經由 onClick 事件去驅動 JavaScript 的程式碼來開啟一個新視窗。

Hint
使用 HTML 所產生的連結，也可以產生新視窗，只要加入 target=_blank 的屬性就可以了，例如「<a target=_blank href=連結網址>連結文字</a>」，但是此方法並無法指定新視窗的各種屬性。

我們可以使用 window.open() 的第三個輸入參數來控制新視窗的選項，請見下列範例，此範例可以讓使用者經由表單的選項來控制新視窗的設定：

Example（winOpen02.htm）：

上述範例的原始檔如下：

原始檔（winOpen02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 window.open() 的範例：控制新視窗的選項</h2>
<hr>
<script>
function openWindow(form){
	var winFmt="";
	winFmt += "width="+form.width.value+",";
	winFmt += "height="+form.height.value+",";
	winFmt += "left="+form.left.value+",";
	winFmt += "top="+form.top.value+",";
	winFmt += "titlebar="+(form.titlebar.status?1:0)+",";
	winFmt += "menubar="+(form.menubar.status?1:0)+",";
	winFmt += "toolbar="+(form.toolbar.status?1:0)+",";
	winFmt += "location="+(form.location.status?1:0)+",";
	winFmt += "scrollbars="+(form.scrollbars.status?1:0)+",";
	winFmt += "resizable="+(form.resizable.status?1:0)+",";
	winFmt += "status="+(form.status.status?1:0);
	status="控制字串 = " + winFmt;
	window.open(form.url.value, form.title.value, winFmt);
}
</script>

<form>
視窗網址：<input size=30 id=url value="http://www.cs.nthu.edu.tw"><br>
視窗名稱：<input size=30 id=title value="newWin"><br>
視窗寬度：<input size=30 id=width value=400><br>
視窗高度：<input size=30 id=height value=300><br>
水平位置：<input size=30 id=left value=100><br>
垂直位置：<input size=30 id=top value=100><br>
<input type=checkbox id=titlebar> 顯示標題列<br>
<input type=checkbox id=menubar> 顯示下拉選單<br>
<input type=checkbox id=toolbar> 顯示工具列<br>
<input type=checkbox id=location> 顯示網址列<br>
<input type=checkbox id=scrollbars> 顯示捲軸<br>
<input type=checkbox id=resizable> 可變大小<br>
<input type=checkbox id=status> 顯示狀態列<br>
<p>
<input type=button value="開啟新視窗" onClick="openWindow(this.form)">
<input type=reset>
<hr>

</body>
</html>

在上述範例中，當使用者按下「開啟新視窗」時，會將控制視窗選項的字串顯示在狀態列，以方便查看。

我們也可以使用 window 物件的 print() 方法來印出一個網頁，例如：

Example（winPrint01.htm）：

在上述範例中，只要你點選任一個連結，JavaScript 就會使用 window.print() 來開啟一個列印的對話視窗。此範例的原始檔如下：

原始檔（winPrint01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 window.print() 的範例</h2>
<hr>
方法一：<a href="#" onClick="window.print()">列印此網頁</a><br>
方法二：<a href="javascript:window.print()">列印此網頁</a>
<hr>

</body>
</html>

請特別注意，我們用了兩個不同的方式來達到同樣的功能。

此外，我們可以使用 window.moveBy(x, y) 來將視窗相對於目前的位置移動 x 和 y 個像素，例如我們可以移動視窗以產生「地震」的效果，範例如下：

Example（winQuake01.htm）：

上述範例的原始檔如下：

原始檔（winQuake01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>地震</h2>
<hr>

<script>
function shakeWindow(x){
	for (i=0; i<1000; i++){
		window.moveBy(0,x)
		window.moveBy(x,0)
		window.moveBy(0,-x)
		window.moveBy(-x,0)
	}
}
</script>

<form>
<input type="button" onClick="shakeWindow(5)" value="小地震">
<input type="button" onClick="shakeWindow(50)" value="大地震">
</form>

<hr>
</body>
</html>

在上述範例中，只要按下任一個按鈕，瀏覽器就會呼叫 window.moveBy，讓視窗上下左右移位，產生彷如地震的感覺。

我們可以使用 window.clipboardData.setData() 來將某段文字送到剪貼簿，請見下列範例：

Example（winClipboard01.htm）：

上述範例的原始檔如下：

原始檔（winClipboard01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>複製文字</h2>
<hr>
請在下列文章點兩下：
<pre style="background-color:#EEEEEE;" ondblclick='javascript:window.clipboardData.setData("Text", this.innerText); alert("你已經拷貝了蔣勳老師的情詩...");'>
我願是滿山的杜鵑 
只為一次無憾的春天 
我願是繁星
捨給一個夏天的夜晚
我願是千萬條江河 
流向唯一的海洋 
我願是那月 
為你，再一次圓滿 
...
</pre>

<hr>
</body>
</html>

在上述範例中，我們只要在情詩上面點兩下，就會將 pre 標籤所夾的文字送到剪貼簿，其中

對於 window 和 document 物件的性質、方法、事件、集合，本書的範例光碟也有完整的列表，由於篇幅有限，不再贅述，請見下列檔案：
JavaScript 程式設計與應用：用於網頁用戶端